<template>
  <div>
    <div class="wrap">
      <div class="g-wrap">
        <div class="u-title">
          <h3>
          <span class="f-ff2">
            <p class="fp-13">听歌排行</p>
          </span>

            <div class="nav">
              <span :class="actShow?'z-sel':''" @click="changeAct('all')">所有时间</span>
              <i></i>
              <span :class="!actShow?'z-sel':''" @click="changeAct('week')">最近一周</span>
            </div>
          </h3>
          <h4 >累积听歌{{listenSongs}}首</h4>
          <span class="leiji" ><a href="javascript:;" class="u-icn2-5"></a>
      <div class="tip">
        <p>实际播放时间过短的歌曲将不纳入计算。</p>
        <i class="t"></i>
        <i class="b"></i>
      </div>
      </span>

        </div>
        <router-view :allData="allData"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Nav from "@/components/Nav";

export default {
  name: "index",
  components: {Header, Footer,Nav},
  data(){
    return {
      actShow: true,
      allData:[],
      listenSongs:''
    }
  },
  methods:{
    async getSingerDetail() {
      let result = await this.$API.reqUserDetail(this.$route.params.id)
      this.listenSongs =  result.data.listenSongs
    },
      getUserRecord() {
      this.$API.reqUserRecord(this.$route.params.id, this.$route.params.type).then((res) => {
        // this.allData = res.data.allData || res.data.weakData
        if (res.data.allData) {
          this.allData = res.data.allData
        } else if (res.data.weekData) {
          this.allData = res.data.weekData

        }
      }, (reject) => {
        console.log(reject)
      }).catch(err => {
        console.log(err)
      })
      // this.allData = result.data.allData
    },
    changeAct(str) {

      if (str === 'week') {
        this.$store.dispatch('userDetail/change', str)
        this.$router.push({name: 'View', params: {id: this.$route.params.id, type: 1}}).catch(err => {
          console.log(err)
        })
      } else if (str === 'all') {
        this.$store.dispatch('userDetail/change', str)
        this.$router.push({name: 'View', params: {id: this.$route.params.id, type: 0}}).catch(err => {
          console.log(err)
        })
      }
    },

  },
  mounted() {
    this.getSingerDetail()
    this.getUserRecord()
    if (this.$route.params.type == 0) {
      this.actShow = true
    } else {
      this.actShow = false
    }
  }

}
</script>

<style scoped lang="less">
.wrap {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 40px;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .g-wrap {
    padding: 40px;
    height: auto;
    overflow: hidden;
    .u-title {
      width: 900px;
      height: 33px;
      margin: 0 auto;
      position: relative;
      border-bottom: 2px solid #c20c0c;
      h4{
        float: left;
        display: inline;
        margin-top: 5px;
        line-height: 26px;
        font-weight: 400;
        font-size: 12px;
        color: #666;
      }
      .leiji{
        position: relative;
        margin-left: 10px;
        left: -1px;
        top: 8px;
        line-height: 18px;
        z-index: 2;
        &:hover .tip{
          display: block;
        }
        a{
          width: 18px;
          height: 18px;
          overflow: hidden;
          vertical-align: middle;
          display: inline-block;
          background-position: 0 -50px;
          background-image: url("../../../assets/icon2.png");

        }
      }
      .tip{
        position: absolute;
        left: -33px;
        top: 30px;
        display: none;
        width: 295px;
        font-size: 12px;
        line-height: 20px;
        padding: 8px 13px 7px 19px;
        z-index: 2;
        color: #666;
        background-image: url("../../../assets/top_m.png");
        p{

        }
        .t{
          position: absolute;
          width: 327px;
          height: 16px;
          left: 0;
          top: -16px;
          background-image: url("../../../assets/top_t.png");
        }
        .b{
          position: absolute;
          width: 327px;
          height: 12px;
          left: 0;
          bottom: -12px;
          background-image: url("../../../assets/top_b.png");

        }
      }

      h3 {
        line-height: 28px;
        float: left;
        font-size: 20px;
        font-weight: normal;

        .f-ff2 {

          display: inline-block;
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

          p {
            float: left;
          }

          .fp-13 {
            position: relative;
            margin-right: 10px;

            .f-pa {
              display: inline-block;
              width: 8px;
              height: 8px;
              top: 0px;
              right: -6px;
              position: absolute;
              background-size: cover;
              background-image: url(../../../assets/black-r-icon@3x.png);

            }
          }
        }

        .nav {
          position: absolute;
          z-index: 1;
          right: 0;
          bottom: 5px;

          span {
            line-height: 26px;
            color: #666;
            font-size: 12px;
            cursor: pointer;
            float: right;
            margin-left: 8px;
          }

          i {
            width: 1px;
            height: 12px;
            margin-top: 7px;
            background-color: #999;
            float: right;
            margin-left: 8px;
            font-style: normal;
            text-align: left;
            font-size: inherit;
          }

          .z-sel {
            color: #333;
            font-weight: 700;
          }
        }
      }
    }

  }
}
</style>